<template>
  <div class="px-4 sticky z-10 top-0 bg-white">
    <a-form :model="{}" label-align="left" auto-label-width layout="horizontal">
      <a-row :gutter="12" class="py-4">
        <a-col :span="4">
          <a-form-item :label="t['素材尺寸']">
            <a-select
              v-model="libraryQuery.sizeId"
              :options="librarySizeData"
              allow-clear
              @change="listLibrary"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item :label="t['素材类型']">
            <a-select
              v-model="libraryQuery.type"
              allow-clear
              :disabled="disableSelected"
              :options="options"
              @change="listLibrary"
            />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item :label="t['素材名称']">
            <a-input-search v-model="libraryQuery.name" allow-clear @search="listLibrary">
            </a-input-search>
          </a-form-item>
        </a-col>
        <a-col :span="12" class="flex justify-end">
          <a-button
            type="primary"
            :disabled="props.selected.length === 0"
            @change="listLibrary"
            @click="emit('change')"
          >
            {{ t["确定"] }}
          </a-button>
          <a-button status="danger" @click="emit('close', false)">
            <IconClose />
          </a-button>
        </a-col>
      </a-row>
    </a-form>
    <div class="mb-3">
      <a-pagination
        :total="libraryQuery.total!"
        :current="libraryQuery.pageNum"
        :page-size="libraryQuery.pageSize"
        @change="change"
      ></a-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Library } from "@/api/service/library/types";
import { getOptions } from "@/data/options/options.actions";
import { DICT_ENUM } from "@/enum/dict.enum";
import { listLibrary } from "../data/curd";
import { libraryQuery, librarySizeData } from "../data/table";

const t = translate("公共模块");
const emit = defineEmits(["close", "change"]);
const props = defineProps<{
  disableSelected?: boolean;
  selected: Library[];
}>();

const change = (current: number) => {
  libraryQuery.value.pageNum = current;
  listLibrary();
};
const options = ref([]);
onMounted(async () => {
  options.value = await getOptions(DICT_ENUM.MATERIAL_TYPE, "素材库");
});
</script>

<style lang="scss" scoped>
.core-head {
  line-height: 42px;
  justify-content: space-between;
  padding: 0 12px;

  .icon {
    width: 28px;
    cursor: pointer;
    height: 28px;
  }
}

:deep(.arco-form-item) {
  margin: 0;
}
</style>
